<template>
  <div class="tabbar animate__animated animate__slideInUp" v-if="isShow">
    <div class="tabbar_main">
      <div
        class="tabbar_item"
        v-for="(item, index) in routes"
        :key="index"
        :class="$route.name === item.name ? 'on' : ''"
      >
        <router-link :to="item.path" v-if="index !== 2"
          ><div class="iconfont" :class="item.meta.icon"></div>
          {{ $t("lang['" + item.meta.title + "']") }}</router-link
        >
        <router-link
          :to="item.path"
          :class="'add_content animate__animated animate__slideInUp'"
          v-else
          ><div class="iconfont" :class="item.meta.icon"></div
        ></router-link>
      </div>
    </div>
    <div class="bottom_security" v-if="isSecurity"></div>
  </div>
</template>
<script>
import { routes } from "@/router/index";
export default {
  name: "Tabbar",
  props: {
    isShow: {
      type: Boolean,
      default() {
        return true;
      },
    },
    isSecurity: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      routes: routes,
    };
  },
  created() {
    console.log(this.$route);
  },
};
</script>
<style lang="less">
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 9999;
  border-top: 1px #cccccc solid;
  .tabbar_main {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 10px;
    .tabbar_item {
      flex: 1;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      align-content: center;
      a {
        flex: 1;
        height: 60px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        &.add_content {
          position: absolute;
          top: -10px;
          width: 60px;
          height: 60px;
          background-color: #bf3779;
          color: #ffffff;
          border: 1px solid #bf3779;
          border-radius: 100%;
          .iconfont {
            font-size: 40px;
            margin: 2px 0;
            color: #ffffff;
          }
        }
        .iconfont {
          font-size: 28px;
          margin: 2px 0;
        }
      }
      &.on {
        color: #bf3779;
        a {
          color: #bf3779;
          .iconfont {
            font-weight: 400;
          }
        }
      }
    }
  }
  .bottom_security {
    height: 34px;
    background-color: #efefef;
  }
}
</style>
